<template>
    <div>
      <Chart :height="height" :option="chartOption" />
    </div>
  </template>
    
  <script setup>
  import Chart from "@/components/charts/index.vue";
  import useChartOption from '@/hooks/charts';
  import { ref } from 'vue';
  
  const props = defineProps({
    height: {
      type: String,
      default: '400px'
    },
    data: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  });
  
  const { chartOption } = useChartOption(() => {
    return {
      title: {
        text: props.title
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['数据']
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: props.data.map(item => item.name)
      },
      series: [
        {
          name: '数据',
          type: 'bar',
          data: props.data.map(item => item.value),
          itemStyle: {
            color: '#0065ff'
          },
          barWidth: '60%'
        }
      ]
    };
  });
  </script>
    
  <style scoped lang="scss">
  </style>
